<template>
	<cl-dialog
		:visible.sync="visible"
		title="选择客户下定金"
		width="800px"
		:props="{
			appendToBody: true,
			closeOnClickModal: false
		}"
		@close="close"
	>
		<el-row>
			<el-col>
				<el-form ref="form" :model="search" label-width="0px">
					<el-form-item label="">
						<cl-keyword-search
							:value="{
								search_content: search.search_content,
								keyword_type: search.keyword_type
							}"
							@update="updateKeyword"
							style="display: inline-block;"
							class="mr-1"
						/>
						<el-button type="primary" :loading="searchCLoading" @click="searchClick"
							>查找</el-button
						>
					</el-form-item>
					<el-form-item label="">
						<el-table :data="tableData" style="width: 100%" max-height="450">
							<el-table-column prop="cus_name" label="客户名称"> </el-table-column>
							<el-table-column prop="inherit_id" label="是否重粉">
								<template slot-scope="scope">
									<div :class="{ 'color-success': !!scope.row.inherit_id }">
										{{ !!scope.row.inherit_id ? "是" : "否" }}
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="cus_id" label="会员号"> </el-table-column>
							<el-table-column prop="cus_mobile" label="手机号"> </el-table-column>
							<el-table-column prop="bra_name" label="所属品牌"> </el-table-column>
							<el-table-column prop="belonger" label="所属人"> </el-table-column>
                            <el-table-column prop="cus_type" label="客户类型"> 
                                <template slot-scope="scope">
									<div>
										{{ scope.row.cus_type ==1?'新客':'老客'}}
									</div>
								</template>
                            </el-table-column>
							<el-table-column prop="opt" label="操作">
								<template slot-scope="scope">
									<el-popover
										placement="bottom"
										width="300"
										:ref="'pop' + scope.$index"
									>
										<el-form
											ref="forms"
											:model="form"
											label-width="140px"
											label-position="top"
										>
											<el-form-item label="定金是否参与结算？">
												<el-radio-group v-model="form.is_join_settlement">
													<el-radio :label="0">不参与结算</el-radio>
													<el-radio :label="1">参与结算</el-radio>
												</el-radio-group>
											</el-form-item>
											<el-form-item label="是否推送售中？">
												<el-radio-group v-model="form.is_push">
													<el-radio
														:label="0"
														:disabled="scope.row.cus_type == 1"
														>否</el-radio
													>
													<el-radio :label="1">是</el-radio>
												</el-radio-group>
											</el-form-item>
											<el-form-item label="" style="margin-bottom: 0px">
												<div style="text-align: right; margin: 0">
													<el-button
														size="mini"
														@click.stop="extClick('pop' + scope.$index)"
														>关闭</el-button
													>
													<el-button
														type="primary"
														size="mini"
														:loading="submitLoading"
														@click.stop="
															submitClick('pop' + scope.$index, scope)
														"
														>确定</el-button
													>
												</div>
											</el-form-item>
										</el-form>
										<el-button
											type="warning"
											slot="reference"
											size="mini"
											@click.stop="openpopver(scope.row)"
											>下定金</el-button
										>
									</el-popover>
								</template>
							</el-table-column>
						</el-table>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<template #footer> </template>
	</cl-dialog>
</template>
<script>
import { mapGetters } from "vuex";
export default {
	props: {
		type: {
			type: String,
			default: "customer"
		}
	},
	data() {
		return {
			submitLoading: false,
			searchCLoading: false,
			popoverShow: false,
			visible: false,
			search: {
				keyword_type: 1,
				search_content: "",
				// page: 1,
				// size: 50,
				biz_id: ""
				// dept_id: ""
			},
			tableData: [],
			form: { is_join_settlement: 0, is_push: "", order_no: "", biz_id: "", cus_id: "" }
		};
	},
	computed: {
		...mapGetters(["userInfo"])
	},
	methods: {
		open(order_no) {
			this.visible = true;
			const { biz_id } = this.userInfo;
			this.search.biz_id = biz_id;
			this.form.biz_id = biz_id;
			this.form.order_no = order_no; //订单id
		},
		updateKeyword(e) {
			this.search.search_content = e.search_content;
			this.search.keyword_type = e.keyword_type;
		},
		searchClick() {
			this.searchCLoading = true;
			this.$service.customer
				.searchCus(this.search)
				.then(res => {
					this.tableData = res;
					this.searchCLoading = false;
				})
				.catch(err => {
					this.searchCLoading = false;
				});
		},
		extClick(ref) {
			this.$refs.forms.resetFields();
			this.$refs[ref].doClose();
		},
		submitClick(ref, { row }) {
			this.form.cus_id = row.cus_id;
			if (this.form.is_push === "") return this.$message.warning("请选择是否推送售中");
			this.submitLoading = true;
			this.$service.deposit
				.addPayOnline(this.form)
				.then(res => {
					this.submitLoading = false;
					this.$message.success("提交成功");
					this.$refs.forms.resetFields();
					this.$refs[ref].doClose();
				})
				.catch(err => {
					this.submitLoading = false;
					this.$refs.forms.resetFields();
					this.$refs[ref].doClose();
				});
		},
		close() {
			this.search.search_content = "";
			this.search.keyword_type = 1;
			this.tableData = [];
			this.searchCLoading = false;
		},
		openpopver(row) {
			if (row.cus_type == 1) {
				this.form.is_push = 1;
			} else {
				// this.form.is_push = "";
			}
		}
	}
};
</script>
<style lang="scss" scoped></style>
